<template>
	<view>
		<view class="messnav" :style="'padding-top:'+ (statusBarHeight+30) +'rpx'">
			<view class="navtitle">消息</view>
			<view class="navimg">
				<image @tap="tosearch" class="search_img" :src="photo_cdn1+'zpupload/static/user/wsearch.png'"></image>
				<image @tap="toggleMessageMenu" class="mess_img" :src="photo_cdn1+'zpupload/static/user/wadd.png'"></image>
			</view>
			<view class="search-box">
				<!-- <u-search @search="search()" @custom="search()" v-model="keywords" class="search-box-u-search" shape="square" placeholder="搜索其实很简单" :clearabled="true" :show-action="false"></u-search> -->
				<view @click="toggleMessageMenu" class="message-menu">
					<!-- <u-icon class="message-menu-icon" name="plus" :class="messageMenu.show ? 'im-bg-grey':''" color="#3f3f3f" size="40"></u-icon> -->
					<view v-if="messageMenu.show" class="message-menu-box popup-menu">
						<navigator class="popup-menu-item" url="/pagesim/search/new-contact" open-type="navigate">
							<image class="menuitem_img" :src="photo_cdn1+'zpupload/static/icon/addfriend.png'"></image>
							<view class="menuitem">加好友/群</view>
						</navigator>
						<navigator class="popup-menu-item" url="/pagesim/pick-user/pick-user?action=create-group" open-type="navigate">
							<image class="menuitem_img" :src="photo_cdn1+'zpupload/static/icon/chatgroup.png'"></image>
							<view class="menuitem">创建群聊</view>
						</navigator>
						<view class="popup-menu-item" @tap="toqrcode" >
							<image class="menuitem_img" :src="photo_cdn1+'zpupload/static/icon/saoyisao.png'"></image>
							<view class="menuitem">扫一扫</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<common :tips='commonTips'></common>
		<!-- <u-mask z-index="888" :custom-style="{background: 'rgba(0, 0, 0, 0.1)'}" :show="maskShow" @click="maskClick"></u-mask> -->
		<u-action-sheet :list="sessionLongpressList" @click="sessionLongpressAction" v-model="sessionLongpressShow"></u-action-sheet>
		<!-- 顶部搜索栏-start -->
		<!-- 顶部搜索栏-end -->
		<!-- 待办-start -->
		<!-- <u-cell-group class="to-do" :border="false">
			<navigator url="/pagesim/center/to-do" open-type="navigate">
				<u-cell-item class="to-do-cell-item" :border-bottom="false" :arrow="true" :title="'待办 • ' + TODOcount">
					<u-icon class="to-do-cell-item-icon" slot="icon" size="32" name="/static/icon/to-do.png"></u-icon>
				</u-cell-item>
			</navigator>
		</u-cell-group> -->
		<!-- 待办-end -->
		<u-line length="92%" class="session-list-top-line" color="#F2F3F4" />
		
		<!-- 会话列表-start -->
		<view class="session-list" :style="'padding-top:'+ (statusBarHeight+100) +'rpx'" >
			<block v-for="(item, index) in sessionListTop" :key="item.id">
				<session @click.native="goToSessionInfo(item.id, item.type, item.chat_id)" @longpress.native="sessionLongpress(item.id, item.top)" :item="item"></session>
			</block>
			<block v-for="(item, index) in sessionList" :key="item.id">
				<session @click.native="goToSessionInfo(item.id, item.type, item.chat_id)" @longpress.native="sessionLongpress(item.id, item.top)" :item="item"></session>
			</block>
			<view class="im-data-none" v-if="loadStatus">{{loadStatus}}</view>
		</view>
		<!-- 会话列表-end -->
		
		
		<login :hidden="isshowlogin" @close="closefun" @loginsucc="loginsucc"></login>
		
		<q-tabbar :active="3" :count="[0,0,0,0,0]"></q-tabbar>
	</view>
</template>

<script>
	
		// "u-toast": "/pagesim/uview-ui/components/u-toast/u-toast",
	    // "common": "/components/common/common",
	    // "u-mask": "/pagesim/uview-ui/components/u-mask/u-mask",
	    // "u-action-sheet": "/pagesim/uview-ui/components/u-action-sheet/u-action-sheet",
	    // "u-search": "/pagesim/uview-ui/components/u-search/u-search",
	    // "u-icon": "/pagesim/uview-ui/components/u-icon/u-icon",
	    // "u-cell-group": "/pagesim/uview-ui/components/u-cell-group/u-cell-group",
	    // "u-cell-item": "/pagesim/uview-ui/components/u-cell-item/u-cell-item",
	    // "u-line": "/pagesim/uview-ui/components/u-line/u-line",
	    // "session": "/components/session/session",
	    // "login": "/components/login/login"
		
	import utoast from "@/uview-ui/components/u-toast/u-toast.vue";
	import umask from "@/uview-ui/components/u-mask/u-mask.vue";
	import uactionsheet from "@/uview-ui/components/u-action-sheet/u-action-sheet.vue";
	
	import usearch from   "@/uview-ui/components/u-search/u-search.vue";
	import uicon from  "@/uview-ui/components/u-icon/u-icon.vue";
	import ucellgroup from "@/uview-ui/components/u-cell-group/u-cell-group.vue";
	import ucellitem from  "@/uview-ui/components/u-cell-item/u-cell-item.vue";
	import uline from "@/uview-ui/components/u-line/u-line.vue";
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn1} = config.baseUrl;
	import {
		Handleqrcode
	} from '@/utils/yicode'; //扫码
	export default {
		components:{
			"u-toast":utoast,
			'u-mask':umask,
			'u-action-sheet':uactionsheet,
			
			"u-search": usearch,
			"u-icon": uicon,
			"u-cell-group": ucellgroup,
			"u-cell-item": ucellitem,
			"u-line": uline,
		},
		data() {
			return {
				isshowlogin: false,
				statusBarHeight: 0, //通知栏高度
				
				keywords: '',
				maskShow: false,
				messageMenu: {
					show: false
				},
				sessionList: [],
				sessionListTop: [],
				TODOcount: 0,
				pageDataLoadBool: false,
				sessionLongpressList: [],
				sessionLongpressShow: false,
				loadStatus: '加载中...',
				commonTips: '',
				photo_cdn1
			}
		},
		onLoad: function () {
			this.ws.pageFun(this.pageDataLoad, this);
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight * 2;
		},
		onShow: function () {
			
			
			let token = uni.getStorageSync("token")
			if (!token) {
				// #ifdef MP-WEIXIN
				setTimeout(() => {
					this.isshowlogin = true;
				}, 1500)
				// #endif
			} else {
				
			}
			
			
			var that = this
			if(this.ws.pageRefresh.message) {
				// 被其他页面通知刷新会话列表(更新列表中的好友备注等)
				this.ws.pageFun(this.pageDataLoad, this);
				this.ws.clearPageRefresh()
				this.ws.pageRefresh.message = false
				this.ws.pageRefresh.sessionInfo = false
				this.ws.messageShow = [] // 已经重载,无需执行messageShow中的方法
				return ;
			}
			if (this.ws.messageShow.length) {
				for (let m in this.ws.messageShow) {
					if (typeof this.ws.messageShow[m] == 'function') {
						this.ws.messageShow[m](that)
						this.ws.messageShow[m] = null
					}
				}
			}
			if (!this.pageDataLoadBool) {
				return ;
			}
			that.ws.checkNetwork(that)
			that.ws.pageFun(function(){
				that.ws.send({
					c: 'ImBase',
					a: 'loadTODO',
					data: {
						'method': 'get-all-count'
					}
				})
			}, that);
		},
		onPullDownRefresh: function () {
			this.ws.pageFun(this.pageDataLoad(true), this);
			this.ws.onMessageCallBack.set('load_session_list', (msg) => {
				if (msg.data.data.refresh && msg.data.data.method == 'load') {
					this.$refs.uToast.show({
						title: '刷新成功~',
						type: 'success'
					})
					uni.stopPullDownRefresh()
				}
			})
		},
		//监听页面滑动 关闭加号弹窗
		onPageScroll(e) {
			this.maskShow = false
			this.messageMenu.show = false
		},
		methods: {
			/*
			扫码方法
			*/
			toqrcode() {
				
				// userinfo im的
				// u_userInfo 用户的
				
				// Handleqrcode('https://zp.xicheda.com/qrcode?type=1&imuser_id=15'); //封装的方法
				
				if(!uni.getStorageSync("u_userInfo")){
					this.$showModal({
						title:'温馨提示',
						concent:'您还未登录,请前往授权登录.',
						cancelVal:'先逛逛',
						confirmVal:'去登录',
					}).then(res=>{
						//安卓 ok
						uni.navigateTo({
						    url: '/pagesim/center/login'
						});
					})
					return ;
				}
				
				// return ;
				uni.scanCode({
					success: res => {
						Handleqrcode(res.result); //封装的方法
					},
					fail: (err) => {
			
					}
				});
			},
			//关闭授权登录弹窗
			closefun() {
				this.isshowlogin = false;
			},
			//登录完成
			loginsucc() {
			
			},
			pageDataLoad: function (refresh = false) {
				this.pageDataLoadBool = true
				this.ws.send({
					c: 'User',
					a: 'loadSessionList',
					data: {
						'refresh': refresh
					}
				})
				this.ws.send({
					c: 'ImBase',
					a: 'loadTODO',
					data: {
						'method': 'get-all-count'
					}
				})
			},
			goToSessionInfo: function(id, type, chat_id) {
				var url = '/pagesim/session-info/session-info?id=' + id
				if (type == 'service') {
					if (chat_id != 3) {
						url = '/pagesim/session-info/notice-session-info?session_id=' + id
					}
				}
				uni.navigateTo({
					url: url
				})
			},
			sessionLongpress: function (id, top) {
				this.sessionLongpressShow = true
				this.sessionLongpressList = [{
					text: top ? '取消置顶':'置顶',
					id: id
				}, {
					text: '移除会话',
					color: '#f74c31',
					id: id
				}]
			},
			sessionLongpressAction: function (idx) {
				var that = this
				if (idx == 0) {
					that.ws.pageFun(function(){
						that.ws.send({
							c: 'User',
							a: 'sessionOperation',
							data: {
								id: that.sessionLongpressList[idx].id,
								action: 'session-top',
								source: 'uni-app'
							}
						})
					}, that)
				} else if (idx == 1) {
					that.ws.pageFun(function(){
						that.ws.send({
							c: 'User',
							a: 'sessionOperation',
							data: {
								action: "session-remove",
								id: that.sessionLongpressList[idx].id,
								source: 'uni-app'
							}
						});
					}, that)
				}
			},
			maskClick: function() {
				this.messageMenu.show && this.toggleMessageMenu()
			},
			toggleMessageMenu(e) {
				if (this.messageMenu.show) {
					this.maskShow = false
					this.messageMenu.show = false
					return ;
				}
				this.messageMenu = {
					show: true,					
				}
				this.maskShow = true
			},
			search: function() {
				if (!this.keywords) {
					this.$refs.uToast.show({
						title: '请输入关键词~',
						type: 'error'
					})
					return ;
				}
				uni.navigateTo({
					url: '/pagesim/search/search?keywords=' + this.keywords,
					success: () => {
						this.keywords = ''
					}
				})
			},
			tosearch(){
				uni.navigateTo({
					url:'/pagesim/search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
page {
	background: #FFFFFF;
}
.messnav{
	width: 100%;
	background-color: #EDEDED;
	padding-bottom: 20rpx;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	display: flex;
	align-items: center;
	/* #ifndef MP-WEIXIN */		
	justify-content: center;
	/* #endif */
	.navtitle{
		font-size: 16px;
		font-weight: 600;
		margin: 0 30rpx;
	}
	.navimg{
		display: flex;
		align-items: center;
		/* #ifndef MP-WEIXIN */
		position: absolute;
		right: 30rpx;
		/* #endif */
		
		.mess_img{
			width: 40rpx;
			height: 40rpx;
			margin-left: 40rpx;
		}
		.search_img{
			width: 36rpx;
			height: 36rpx;
		}
	}
}
.search-box {
	display: flex;
	align-items: center;
	padding: 20rpx 0 10rpx 0;
}
.search-box .search-box-u-search {
	width: 616rpx;
}
.search-box .message-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 20rpx;
}
.message-menu .message-menu-icon {
	padding: 6rpx;
	z-index: 1001;
	border-radius: 4px;
}
.message-menu-box {
	width: 280rpx;
	box-sizing: border-box;
	position: absolute;
	/* #ifdef H5 */
	top: 120rpx;
	/* #endif */
	/* #ifndef H5 */
	top: 200rpx;
	/* #endif */	
	/* #ifdef MP-WEIXIN */
	left: 15rpx;
	/* #endif */
	right: 15rpx;
	background: #FFFFFF;
	box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);
	border-radius: 8rpx;
	z-index: 1001;
}

.message-menu-box::before{
	content: '';
	position: absolute;
	top: -38rpx;
	right: 22rpx;
	width: 0;
	height: 0;
	border-top: 20rpx solid transparent; 
	border-right: 18rpx solid transparent;
	border-left: 18rpx solid transparent;
	border-bottom: 20rpx solid white;
	
}
.popup-menu .popup-menu-item {
	display: flex;
	padding: 30rpx 0rpx;
	align-items: center;
	border-bottom: 1px solid #F3F4F6;
}
.menuitem{
	font-size: 28rpx;
}
.menuitem_img{
	width: 38rpx;
	height: 38rpx;
	margin: 0 10rpx 0 50rpx;
}
.popup-menu .popup-menu-item:last-child {
	border: none;
}
.to-do .to-do-cell-item .to-do-cell-item-icon {
	margin-right: 10rpx;
}
.session-list-top-line {
	display: flex;
	align-items: center;
	justify-content: center;
}
.im-bg-grey {
	background-color: $--grey;
	color: $--white;
}
</style>
